<template>
  <div class="typhoon-box" style="padding: 20px;">
    <div
      style="text-align: center;color: #fff;font-weight: 700;font-size: 24px;margin-bottom: 30px;display: flex;justify-content: space-between;">
      <div class="conf" @click="openTargetPage(typhoonData.dataCenterName)">{{ typhoonData.countryNameCn }}网络层详细信息</div><i class="el-icon-close"
        style="cursor: pointer;" @click="closeInfo2"></i>
      <el-button type="primary" @click="testfun">测试按钮</el-button>
    </div>
    <!-- {{ typhoonData }} -->
    <div class="container">
      <div class="box">
        <div style="position: absolute;margin: 10px 0 0 10px;">云服务</div>
        <div class="echart" id="mychartCircle" :style="myChartStyle"></div>
      </div>
      <div class="box">
        <div style="position: absolute;margin: 10px 0 0 10px;">云组件</div>
        <div class="server-data">
          <div v-for="(value, key) in protocolData" :key="key" class="data-item">
            <div>{{ value['field'] }}</div>
            <div style="color: #73c0de;">{{ value['count'] }}</div>
          </div>
        </div>
      </div>
      <div class="box">
        <div style="position: absolute;margin: 10px 0 0 10px;">Web框架</div>
        <div class="echart" id="mychart" :style="myChartStyle1"></div>
      </div>
      <div class="box">
        <div style="position: absolute;margin: 10px 0 0 10px;">Web应用</div>

        <div class="echart" id="mychartWeb" :style="myChartStyle"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "TyphoonInfo",
  data() {
    return {
      xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
      yData: [23, 24, 18, 25, 27, 28, 25], //数据
      myChartStyle: { width: "100%", height: "200px" }, //图表样式
      myChartStyle1: { width: "100%", height: "230px" }, //图表样式
      pieData: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      centerName: '',
      protocolData: []
    };
  },
  props: {
    typhoonData: Object,
    closeInfo2: Function
  },
  watch: {
    'typhoonData': {
      deep: true,
      handler(newVal, oldVal) {
        // 当 typhoonData 更新时调用
        this.initEcharts();
        this.initEchartsCircle();
        this.initEchartsIp();
        this.protocolList();
      }
    }
  },
  methods: {
    testfun() {
      console.log('typhoonData', this.typhoonData);
    },

    openTargetPage(obj) {
      window.open(`/assetlist?dataCenterName=${obj}`, '_self')
    },

    initEcharts() {
      // console.log(`output->typhoonData得到点`, this.typhoonData);
      // 解析数据
      let data = JSON.parse(this.typhoonData.webFrameSort);
      data.sort((a, b) => a.count - b.count);
      // console.log(`output->data`, data);
      let keys = [];
      let values = [];
      data.forEach(res => {
        keys.push(res['field']);
        values.push(res['count']);
      });

      // console.log(`output->1`, keys, values);

      // 配置条形图选项
      const option = {
        grid: {
          left: '10px', // 设置图表距离容器左侧的距离
          containLabel: true // 确保标签被包含在 grid 区域内
        },
        xAxis: {
          type: 'value', // 条形图的X轴为数值轴
          axisLabel: {
            interval: 0, // 显示所有标签
            fontSize: 10
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category', // 条形图的Y轴为类目轴
          data: keys, // Y轴显示类目数据
          show: true,
          axisLabel: {
            fontSize: 10,
            color: '#fff',

          }
        },
        series: [
          {
            type: "bar", // 形状为条形图
            barWidth: '60%', // 设置条形的宽度，可以是百分比或像素值
            barWidth: '11px',
            data: values,
            itemStyle: {
              normal: {
                // 颜色设置
                color: function (params) {
                  if (params.dataIndex >= 2) {
                    return 'red'; // 前三条设置为红色
                  } else {
                    return '#333'; // 其他设置为灰色
                  }
                }
              }
            },
            label: {
              normal: {
                show: true, // 显示数值
                position: 'right', // 数值放在条形的右侧
                color: '#fff',
                formatter: function (params) {
                  return params.value; // 显示数值
                }
              }
            }
          }
        ]
      };

      // 初始化图表
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);

      // 随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    initEchartsWeb() {
      // 基本柱状图
      // 基本柱状图
      let data = JSON.parse(this.typhoonData.webAppSort)
      let values = [];
      data.forEach(res => {
        values.push({ value: res['count'], name: res['field'] });
      })
      // console.log(`output->c`, values)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical', // 设置图例垂直排列
          right: 10,
          top: 20,
          formatter: function (name) {
            return name.length > 15 ? name.substring(0, 15) + '\n' + name.substring(15) : name;
          },
          bottom: 20, // 设置图例在容器右侧的位置，可以根据需要调整
          top: 'middle', // 设置图例垂直居中对齐
          textStyle: { // 设置图例文字的样式
            color: '#fff', // 设置图例文字颜色为红色
          }
        },
        series: [
          {
            name: 'Server',
            type: 'pie',
            radius: ['56%', '60%'],
            data: values,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            //   emphasis: {
            //     label: {
            //       show: true,
            //       fontSize: 40,
            //       fontWeight: 'bold'
            //     }
            //   },
            labelLine: {
              show: false
            },
            left: '-120px'
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychartWeb"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    initEchartsCircle() {
      // 基本柱状图
      let data = JSON.parse(this.typhoonData.cloudServerSort)
      //  let keys = [];
      let values = [];

      data.forEach(res => {
        values.push({ value: res['count'], name: res['field'] });
      })
      // console.log(`output->c`, values)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical', // 设置图例垂直排列
          right: 10, // 设置图例在容器右侧的位置，可以根据需要调整
          formatter: function (name) {
            return name.length > 15 ? name.substring(0, 15) + '\n' + name.substring(15) : name;
          },
          top: 'middle', // 设置图例垂直居中对齐
          textStyle: { // 设置图例文字的样式
            color: '#fff' // 设置图例文字颜色为红色
          }
        },
        series: [
          {
            name: 'Server',
            type: 'pie',
            radius: ['56%', '60%'],
            data: values,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            //   emphasis: {
            //     label: {
            //       show: true,
            //       fontSize: 40,
            //       fontWeight: 'bold'
            //     }
            //   },
            labelLine: {
              show: false
            },
            left: '-120px'
          }
        ]
      };
      const myChart1 = echarts.init(document.getElementById("mychartCircle"));
      myChart1.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart1.resize();
      });
    },
    protocolList() {
      this.protocolData = JSON.parse(this.typhoonData.cloudConponentSort)
      // console.log(`output->this.protocolData `, this.protocolData)
    },
  },
  mounted() {
    this.initEcharts();
    this.initEchartsCircle();
    this.initEchartsWeb();
  },
  created() {
    this.protocolList()
  },
};
</script>
<style lang="scss" scoped>
.conf {
  border-bottom: 1px solid white;
  cursor: pointer;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.conf:hover {
  color: #00B0FF;
  border-bottom: 1px solid #00B0FF;
}

.container {
  display: flex;
  /* 启用Flexbox布局 */
  flex-wrap: wrap;
  /* 允许换行 */
  justify-content: space-between;
  /* 使子元素在主轴上平均分布 */
}

.box {
  width: 48%;
  height: 200px;
  background-color: #00081ba7;
  /* 背景颜色，仅用于示例 */
  margin: 1%;

  .server-data {

    height: 163px;
    max-height: 163px;
    // overflow: auto;
    overflow: scroll;
    scrollbar-width: none; //隐藏滚动条  /* 适用于 Firefox */
    -ms-overflow-style: none;
    cursor: grab;
    margin-top: 35px;
    font-size: 14px;

    .data-item {
      // background: red;
      margin: 5px 10px;
      padding: 5px 0px;
      display: flex;
      justify-content: space-between;
    }

    .data-item:nth-child(2n) {
      background: #1d2846;
    }
  }
}
</style>